<template>
  <header class="main-header">
    <div class="logo-container">
      <img src="/src/assets/images/Index/logo.png" alt="Logo" class="logo">
    </div>
    <nav class="main-nav">
      <ul>
        <li><router-link to="/index" :class="{ active: isActive('/index') }">首页</router-link></li>
        <li><router-link to="/evasystem" :class="{ active: isActive('/evasystem') }">体系解读</router-link></li>
        <li><router-link to="/Calculate" :class="{ active: isActive('/Calculate') }">价值评估</router-link></li>

        <li><router-link to="/Responsibility" :class="{ active: isActive('/Responsibility') }">可持续发展责任</router-link></li>
        <li><router-link to="/TeamInfo" :class="{ active: isActive('/TeamInfo') }">关于我们</router-link></li>
      </ul>
    </nav>
    <div class="auth-container">
      <template v-if="isLoggedIn">
        <div class="user-info" @click="showSetting" >
          <img :src="userAvatar" alt="User Avatar" class="user-avatar">
          <span class="user-nickname">{{ userNickname }}</span>
        </div>
        <div v-if="isDropdownVisible" class="dropDown">
          <ul>
            <li v-for="item in chooseMenu" :key="item.action" class="chooseMenu" @click="handleMenuClick(item)">{{ item.label}}</li>
          </ul>
        </div>
      </template>
      <button v-else class="login-button" @click="goToLogin">登录智评师 ></button>
    </div>
  </header>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();


// 固定头像和昵称
const fixedAvatar = '/src/assets/images/user.png';
const fixedNickname = '爱测评';

// 使用 computed 根据 localStorage 中是否存在 admin-token 来判断是否已登录
const isLoggedIn = computed(() => {
  return localStorage.getItem('admin-token') !== null;
});
console.log("login装态:",isLoggedIn)

// 根据登录状态设置显示的头像和昵称
const userAvatar = computed(() => {
  return isLoggedIn.value ? fixedAvatar : '';
});

const userNickname = computed(() => {
  return isLoggedIn.value ? fixedNickname : '';
});


const goToLogin = () => {
  router.push('/login');
};

// 检查路由是否激活的函数
const isActive = (path) => {
  return route.path === path;
};
//下拉框实现
//点击状态变化
const isDropdownVisible = ref(false);
const showSetting = () => {
  isDropdownVisible.value = !isDropdownVisible.value;
}
//选择菜单
const chooseMenu = [
  { label: '个人空间', action: 'personSpace' },
  { label: '退出登录', action: 'logout' },
];

//下拉框内函数实现
const handleMenuClick = (item) => {
  if(item.action === 'personSpace'){
    router.push('/dashboard')
  }
  if (item.action === 'logout') {
    logout();
  }
}
const logout = () =>{
  localStorage.removeItem('admin-token'); // 清除登录信息
  router.push('/index').then(() => {
    setTimeout(() => {
      window.location.reload();
    }, 200); // 轻微延迟确保跳转执行后刷新
  });
}
onMounted(() => {
  console.log('Component mounted, admin-token:', localStorage.getItem('admin-token'));
});
</script>

<style scoped>
/* Header Styles */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  position: relative;
  z-index: 10;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  height: 70px;
  width: 300px;
  margin-right: 20px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

.main-nav li {
  margin-left: 25px;
}

.main-nav a {
  text-decoration: none;
  color: #555;
  position: relative; /* 为蓝色下划线定位 */
  padding-bottom: 5px; /* 预留底部空间 */
}

.main-nav a:hover {
  color: #4a90e2;
}

.main-nav a.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px; /* 调整下划线与文字的距离 */
  width: 100%;
  height: 2px;
  background-color: #4a90e2; /* 蓝色下划线颜色 */
}

.auth-container {
  display: flex;
  align-items: center;
}

.login-button {
  background-color: #4a90e2;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

/* User Info Styles */
.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;

}
.dropDown {
  position: absolute;
  top: 70px;
  width: 95px;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
  padding: 10px;
  z-index: 100;
  user-select: none;

}

.chooseMenu{
  list-style-type: none;
  border-radius: 8px;
  margin-bottom: 10px;
}

.chooseMenu:active {
  background-color: #f0f0f0; /* 点击时变深 */
  transform: scale(0.95); /* 轻微缩小，模拟按压感 */
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;

  object-fit: cover; /* 防止图片变形 */
}

.user-nickname {
  color: #333;
  font-weight: bold;
  user-select: none;
}

/* --- Responsive adjustments (Example) --- */
@media (max-width: 768px) {
  .main-header {
    flex-direction: column;
    padding: 15px;
  }

  .main-nav ul {
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .main-nav li {
    margin: 5px 10px;
  }

  .login-button {
    margin-top: 10px;
  }

  .auth-container {
    margin-top: 10px;
  }
}

</style>